<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('项目名称')" prop="dealName">
            <el-input v-model="form.dealName" :placeholder="$t('项目名称')" show-word-limit maxlength="100" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('承租人名称')" prop="companyName">
            <el-input v-model="form.companyName" :placeholder="$t('承租人名称')" show-word-limit maxlength="100" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('回访方式')" prop="returnVisitMethod">
            <dict-select
              v-model="form.returnVisitMethod"
              dictionary="return_visit_method"
              :placeholder="$t('回访方式')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('回访日期')" prop="returnVisitDate">
            <el-date-picker
              v-model="form.returnVisitDate"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('回访日期')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('回访人员')" prop="returningVisitors">
            <el-input v-model="form.returningVisitors" :placeholder="$t('回访人员')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('原资产类别')" prop="originalAssetClass">
            <el-radio-group v-model="form.originalAssetClass">
              <el-radio
                v-for="item in originalAssetClassOptions"
                :key="item.dictValue"
                :label="$t(item.dictValue)"
              > {{ $t(item.dictLabel) }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('检验后类别')" prop="afterInspectionCategory">
            <el-radio-group v-model="form.afterInspectionCategory">
              <el-radio
                v-for="item in afterInspectionCategoryOptions"
                :key="item.dictValue"
                :label="$t(item.dictValue)"
              > {{ $t(item.dictLabel) }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('租金回收情况')" prop="rentalRecoverySituation">
            <el-input v-model="form.rentalRecoverySituation" type="textarea" :placeholder="$t('租金回收情况')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('财产情况及盈利')" prop="propertyAndProfitability">
            <el-input v-model="form.propertyAndProfitability" type="textarea" :placeholder="$t('财产情况及盈利')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('能力分析')" prop="capabilityAnalysis">
            <el-input v-model="form.capabilityAnalysis" type="textarea" :placeholder="$t('能力分析')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('债务及偿债能力分析')" prop="solvencyAnalysis">
            <el-input v-model="form.solvencyAnalysis" type="textarea" :placeholder="$t('债务及偿债能力分析')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('其他回访情况')" prop="otherReturnVisits">
            <el-input v-model="form.otherReturnVisits" type="textarea" :placeholder="$t('其他回访情况')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <br>
      <div class="area-header">
        <span class="area-header-title">{{ $t('承租人情况') }}</span>
      </div>

      <el-table
        :data="form.dealTenantSituationList"
        border
        class="nowrapTable formTable "
        style="overflow: auto;"
      >
        <el-table-column :label="$t('序号')" align="center" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('实际控制人及管理人员变动情况')" align="center" min-width="400">
          <template slot-scope="scope">
            <el-form-item :prop="'dealTenantSituationList.' + scope.$index + '.changesInManagement' ">
              <el-input v-model="scope.row.changesInManagement" type="textarea" class="fileTextarea" :placeholder="$t('实际控制人及管理人员变动情况')" show-word-limit maxlength="1000" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('承租人经营情况')" align="center" min-width="400">
          <template slot-scope="scope">
            <el-form-item :prop="'dealTenantSituationList.' + scope.$index + '.lesseeBusiness' ">
              <el-input v-model="scope.row.lesseeBusiness" type="textarea" class="fileTextarea" :placeholder="$t('承租人经营情况')" show-word-limit maxlength="1000" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" min-width="80" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="text" icon="el-icon-delete" @click="delHandleTenant(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <div class="tol">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addTenant">{{ $t("添加") }}</el-button>
      </div>
      <br>
      <br>
      <div class="area-header">
        <span class="area-header-title">{{ $t('担保人情况') }}</span>
      </div>

      <el-table
        :data="form.dealGuarantorSituationList"
        border
        class="nowrapTable formTable "
        style="overflow: auto;"
      >
        <el-table-column :label="$t('序号')" align="center" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('实际控制人及管理人员变动情况')" align="center" min-width="400">
          <template slot-scope="scope">
            <el-form-item :prop="'dealGuarantorSituationList.' + scope.$index + '.changesInManagement' ">
              <el-input v-model="scope.row.changesInManagement" type="textarea" class="fileTextarea" :placeholder="$t('实际控制人及管理人员变动情况')" show-word-limit maxlength="1000" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('经营情况')" align="center" min-width="400">
          <template slot-scope="scope">
            <el-form-item :prop="'dealGuarantorSituationList.' + scope.$index + '.business' ">
              <el-input v-model="scope.row.business" type="textarea" class="fileTextarea" :placeholder="$t('经营情况')" show-word-limit maxlength="1000" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('租赁物情况')" align="center" min-width="400">
          <template slot-scope="scope">
            <el-form-item :prop="'dealGuarantorSituationList.' + scope.$index + '.rentalSituation' ">
              <el-input v-model="scope.row.rentalSituation" type="textarea" class="fileTextarea" :placeholder="$t('租赁物情况')" show-word-limit maxlength="1000" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('资金使用情况')" align="center" min-width="400">
          <template slot-scope="scope">
            <el-form-item :prop="'dealGuarantorSituationList.' + scope.$index + '.useOfFunds' ">
              <el-input v-model="scope.row.useOfFunds" type="textarea" class="fileTextarea" :placeholder="$t('资金使用情况')" show-word-limit maxlength="1000" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('其他回访情况')" align="center" min-width="400">
          <template slot-scope="scope">
            <el-form-item :prop="'dealGuarantorSituationList.' + scope.$index + '.otherReturnVisits' ">
              <el-input v-model="scope.row.otherReturnVisits" type="textarea" class="fileTextarea" :placeholder="$t('其他回访情况')" show-word-limit maxlength="1000" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" min-width="80" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="text" icon="el-icon-delete" @click="delHandleGuarantor(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <div class="tol">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addGuarantor">{{ $t("添加") }}</el-button>
      </div>
      <FileTable :list.sync="form.fileList" data-type="deal_lease_visit" :business-id="autoBusinessId($route.query.id, form)" />
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="deal:leaseVisit" />
    </div>
  </div>
</template>

<script>
    import { saveDealLeaseVisit, getDealLeaseVisit, delDealTenantSituation, delDealGuarantorSituation } from '@/api/deal/leasingProject/dealLeaseVisit'
    import { getDealBase } from '@/api/base/deal/dealBase'
    export default {
        data() {
            return {
                originalAssetClassOptions: [],
                afterInspectionCategoryOptions: [],
                // 表单参数
                form: {
                  // 上传
                  fileList: [],
                  // 承租人情况
                  dealTenantSituationList: [],
                  // 担保人情况
                  dealGuarantorSituationList: []
                },
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {
                dealName: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                  companyName: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                returnVisitMethod: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                returnVisitDate: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                returningVisitors: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                originalAssetClass: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                afterInspectionCategory: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ]
                }
            }
        },
        created() {
            this.getDicts('return_visit_method').then(response => {
                this.returnVisitMethodOptions = response.data
            })
            this.getDicts('original_asset_class').then(response => {
                this.originalAssetClassOptions = response.data
                this.afterInspectionCategoryOptions = response.data
            })
        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getDealLeaseVisit(data.id).then(response => {
                        this.form = response.data
                        this.loading = false
                    }).catch(() => {
                      this.loading = false
                    })
                } else {
                    this.reset()
                    // 获取项目名称和承担人名称
                  getDealBase(this.$route.query.id).then(response => {
                    this.form.dealName = response.data.dealName
                    this.form.companyName = response.data.company.companyName
                  })
                    this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    dealId: this.$route.query.id,
                    companyId: this.$route.query.companyId,
                    dealName: undefined,
                    renterName: undefined,
                    returnVisitMethod: undefined,
                    returnVisitDate: new Date(),
                    returningVisitors: undefined,
                    originalAssetClass: undefined,
                    afterInspectionCategory: undefined,
                    rentalRecoverySituation: undefined,
                    propertyAndProfitability: undefined,
                    capabilityAnalysis: undefined,
                    solvencyAnalysis: undefined,
                    otherReturnVisits: undefined,
                    delFlag: undefined,
                    createBy: undefined,
                    createTime: undefined,
                    updateBy: undefined,
                    updateTime: undefined
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveDealLeaseVisit(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                }).catch(() => {
                    this.loading = false
                })
           },
          delHandleTenant(index, row) {
            const id = row.id
            if (id !== undefined && id !== '' && id != null) {
              this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
              })
                .then(function() {
                  return delDealTenantSituation(id)
                }).then(() => {
                this.form.dealTenantSituationList.splice(index, 1)
                return this.msgSuccess(this.$t('删除成功'))
              })
                .catch(function() {})
            } else {
              this.form.dealTenantSituationList.splice(index, 1)
            }
          },
          addTenant() {
            const row = {
              id: undefined,
              visitId: undefined,
              changesInManagement: undefined,
              lesseeBusiness: undefined
            }
            if (!(this.form.dealTenantSituationList instanceof Array)) {
              this.$set(this.form, 'dealTenantSituationList', [])
            }
            this.$nextTick(() => {
              this.form.dealTenantSituationList.push(row)
            })
          },

          delHandleGuarantor(index, row) {
            const id = row.id
            if (id !== undefined && id !== '' && id != null) {
              this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
              })
                .then(function() {
                  return delDealGuarantorSituation(id)
                }).then(() => {
                this.form.dealGuarantorSituationList.splice(index, 1)
                return this.msgSuccess(this.$t('删除成功'))
              })
                .catch(function() {})
            } else {
              this.form.dealGuarantorSituationList.splice(index, 1)
            }
          },
          addGuarantor() {
            const row = {
              id: undefined,
              visitId: undefined,
              changesInManagement: undefined,
              business: undefined,
              rentalSituation: undefined,
              useOfFunds: undefined,
              otherReturnVisits: undefined
            }
            if (!(this.form.dealGuarantorSituationList instanceof Array)) {
              this.$set(this.form, 'dealGuarantorSituationList', [])
            }
            this.$nextTick(() => {
              this.form.dealGuarantorSituationList.push(row)
            })
          }
        }
    }
</script>
